<template>
	<view class="discount page bgf5">
		<view @click="openShopPicker" class="flex flexC bold6 bgff px15" :style="{paddingTop: statusBar + 'px'}">
			<image class="icon mr6" src="/static/img/icon/shop.png" mode="widthFix"></image>
			<text  class="c00 ellipsis1 py6 pr10">{{selectShop.name || '---'}}</text>
			<image class="down" src="/static/img/icon/down_nor.png" mode="widthFix"></image>
		</view>
		<view class="flex flexC flexB c99 fs16 px10 py6 bgff px15">
			<view class="pt8 pb4 item" @click="switchTab(index)" v-for="(item,index) in tabs" :key="index" :class="index==currentTab?'active':''">
				<text>{{item}}</text>
				<image v-if="currentTab == index" class="icon" src="/static/img/icon/sel.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 帐户充值 -->
		<account-recharge ref="accountRecharge" v-if="currentTab == 0" :statusBar="statusBar"></account-recharge>
		<!-- 团购券 -->
		<group-coupon ref="groupCoupon" v-else-if="currentTab == 1" :statusBar="statusBar"></group-coupon>
		
		<!-- 优惠券 -->
		<coupon-box ref="couponBox" v-else-if="currentTab == 2"></coupon-box>
		
		<!-- 积分商城 -->
		<!-- <mall v-else-if="currentTab == 3"></mall> -->
		
		<!-- 积分 -->
		<!-- <integral-box ref="integralBox" v-else-if="currentTab == 3"></integral-box> -->
		<!-- 美团验券 -->
		<meituan-verfication ref="meituanVer" v-else :pageH="'calc(100vh - 156rpx - ' + statusBar + 'px)'"></meituan-verfication>
		
		<!-- 店铺选择 -->
		<uni-popup ref="shopPicker" type="bottom">
			<shop-list @search="search" :list="list" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
		</uni-popup>
	</view>
</template>

<script>
	const statusBar = uni.getSystemInfoSync().statusBarHeight + 10;
	export default {
		data() {
			return {
				statusBar,
				tabs: ['账户充值','团购券','优惠券','美团验券'],
				currentTab: 3,
				list: [],
				selectShop:null,
				keyword:"",
				isSearch:false,
				id:''
			};
		},
		
		onLoad(option) {
			
			if (option.q) {
				let scan_url = decodeURIComponent(option.q);
			
				console.info("===option==" + scan_url)
			
				var index = scan_url.lastIndexOf("\/");
				var result = scan_url.substring(index + 1, scan_url.length);
				this.id = result.split("-")[0];
				//this.room_id = result.split("-")[1];
				console.info("===result==" + result)
				this.getDetail();
				
			}
		
			
		},
		onTabItemTap: function(e) {
			console.log(e);
			uni.vibrateShort({
				success: function () {
					console.log('success');
				}
			});
		},
		
		onShow() {
			
			var shopId = uni.getStorageSync("shopId");
			var tabIndex = uni.getStorageSync("tabIndex");
			if(tabIndex != ''){
				this.currentTab = tabIndex;
				uni.setStorageSync("tabIndex","");
			}
			console.info("===shopId==="+shopId);
			if(shopId != ''){
				this.id = shopId;
				this.currentTab = tabIndex;
				uni.setStorageSync("shopId","");
				uni.setStorageSync("tabIndex","");
				
				this.getDetail();
			}
			
			this.getLocation();
		
		},
		methods: {
			
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.lat = res.latitude;
						that.lng = res.longitude;
						that.getShopList();
					},
					fail: function(res) {
						that.getShopList();
						console.info("location  fail" + JSON.stringify(res))
					}
				})
			},
			
			search(e){
				
				this.keyword = e;
				this.getShopList();
				this.isSearch = true;
				console.info("=====search====="+e);
			},
			
			getDetail() {
				let param = {
					id: this.id
				};
				let that = this;
				this.$api.getShopDetail(param).then(res => {
			
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.selectShop = res.data;
						that.onSelectShop(res.data);
					} else {
			
					}
				})
			},
			
			// 选择店铺
			onSelectShop(item) {
				this.selectShop = item;
				this.isSearch = false;
				this.onClose();
				// 调用子组件事件
				if(this.currentTab == 0) {
					this.$refs.accountRecharge.getCharge(this.selectShop);
				}else if(this.currentTab == 1) {
					this.$refs.groupCoupon.getData(this.selectShop);
				}else if(this.currentTab == 2) {
					this.$refs.couponBox.getData(this.selectShop);
				}else  if(this.currentTab == 3){
					this.$refs.meituanVer.getData(this.selectShop)
				}
			},
			getShopList(){
				let param = {
					keyword:this.keyword,
					orgId:uni.getStorageSync("orgId"),
					lat:this.lat,
					lng:this.lng
				};
				let that = this;
				this.$api.shopList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;
						console.info("=====dddddddd==="+that.id);
						if(that.id == ""){
							that.selectShop = that.list[0];
							that.switchTab(that.currentTab)
							//that.$refs.accountRecharge.getCharge(that.selectShop);
						}
					
					} else {
				
					}
				})
			},
			switchTab(index){
				this.currentTab = index;
				this.$nextTick(() => {
					if(this.currentTab == 0) {
						this.$refs.accountRecharge.getCharge(this.selectShop);
					}else if(this.currentTab == 1) {
						this.$refs.groupCoupon.getData(this.selectShop);
					}else if(this.currentTab == 2) {
						this.$refs.couponBox.getData(this.selectShop);
					}else if(this.currentTab == 3){
						this.$refs.meituanVer.getData(this.selectShop)
					}
				})
			},
			
			openShopPicker() {
				this.$refs.shopPicker.open();
			},
			onClose() {
				this.$refs.shopPicker.close();
			}
		}
	}
</script>

<style lang="scss">
.discount {
	.icon {width: 38rpx;}
	.down {width: 20rpx;height: 20rpx;}
	.ellipsis1 {max-width: 200rpx;}
	.item {
		position: relative;
		&.active {
			color: #333;
			font-weight: 600;
		}
		.icon {
			width: 38rpx;
			height: 14rpx;
			position: absolute;
			bottom: -4rpx;
			left: calc(50% - 19rpx);
		}
	}
	
}
</style>
